<template>
  <div class="">
    <Title title="职位详情"></Title>
    <div class="normaltext jobname">
      <div>岗位:{{info.gangwei}}</div>
      <div>综合薪资: <span>{{info.xinzi}}</span></div>
    </div>


    <div class="company-box">
      <div class="item-left">
        <image src="../../static/company-mini.png"></image>
      </div>
      <div class="item-right">
        <div class="company-name">{{info.title}}</div>
        <div class="normaltext company-address" >地址：{{info.dizhi}}</div>
        <div class="company-bonus">{{info.huodong}}</div>
      </div>

    </div>

    <div class="job-describe">
      <div class="header normaltext">
        <div>
          <image class="icon" src="../../static/book.png"></image>
          入职要求
        </div>
        <div class="user-action">
          <a href="/pages/refer/main" class="refer">推荐好友</a>
          <a href="/pages/apply/main" class="apply">在线报名</a>
        </div>
      </div>
      <div class="content smalltext">
        {{info.description}}
      </div>
    </div>

    <div class="job-describe">
      <div class="header normaltext">
        <div>
          <image class="icon" src="../../static/book.png"></image>
          职位描述
        </div>
      </div>
      <div class="content smalltext">
        <wxParse :content="info.zwms" />
      </div>
    </div>
    <div class="job-describe">
      <div class="header normaltext">
        <div>
          <image class="icon" src="../../static/company-icon.png"></image>
          公司介绍
        </div>

      </div>
      <div class="content smalltext">
        <wxParse :content="info.content" />
      </div>
    </div>
    <Contact> </Contact>
  </div>
</template>



<script>
  const wxapp = getApp();
  import wxParse from 'mpvue-wxparse'
  import Title from '@/components/Title'
  // import ReferInput from '@/components/refer/ReferInput'
  import Contact from '@/components/contact'

  export default {
    data() {
      return {
        info: {}
      }
    },
    components:{
      Title,
      Contact,
      wxParse
    },
    onShow() {
      this.getInfo()
    },
    methods: {
      getInfo() {
        let that = this
        let id = this.$root.$mp.query.id
        if(!id) {
          wx.showToast({
            title: '参数不对.',
            icon: 'success',
            duration: 2000
          })
        }
        wx.request({
          url: wxapp.globalData.ROOT_URL, //仅为示例，并非真实的接口地址
          data: {
             id,
             service: 'App.Hong.GetDetailInfo',
             table: '4_jobs'
          },
          success: function(res) {
            that.info = res.data.data.result
          }
        })

      }
    }
  }
</script>
<style scoped>
  .jobname{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 95rpx;
    border-bottom: 2rpx solid #DCDCDC;
    padding:  0 50rpx;
  }
  .company-box{
    display: flex;
    flex-direction: row;
    padding: 20rpx;
  }
  .company-box .item-left {
    height: 210rpx;
  }
  .company-box .item-left image{
    width: 250rpx;
    height: 210rpx;
  }
  .company-box .item-right{
    display: flex;
    flex-direction: column;
    padding-left: 15rpx;
  }

  .item-right .company-address {
    margin-top: 15rpx;
    color: #1F1F1F;
  }
  .item-right .company-name,.item-right .company-bonus {
   font-size: 35rpx;
  }
  .item-right .company-bonus{
    margin-top: 15rpx;
    color: #ED262E;
  }
  .job-describe .header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: #ececec;
    line-height: 70rpx;
    padding:  0 20rpx;
  }
  .header .icon{
    width: 50rpx;
    height: 50rpx;
    vertical-align: middle;
    margin-top: -6rpx;
  }
  .user-action{
    display: flex;
    flex-direction: row;
  }
  .user-action .refer,.user-action .apply{
    line-height: 50rpx;
    margin: 10rpx 10rpx;
    border-radius: 10rpx;
    padding: 5rpx 10rpx;
    color: #fff;
  }
   .user-action .refer{
     background:#EA2D1A;
   }
  .user-action .apply{
    background:#4890B2;
  }
  .user-action div{
    padding: 0 20rpx;
  }
  .job-describe .content{
    display: flex;
    flex-direction: column;
    padding: 30rpx;
    color: #1F1F1F;
    font-size: 28rpx;
  }

</style>
